import React, { useState } from 'react';
import NoUiSlider from '../../components/NoUiSlider';
import './styles.css';

const PipsSlider = () => {
  const [values, setValues] = useState([20, 80]);

  const handleChange = (values) => {
    setValues(values.map(Number));
  };

  const handleEnd = (values) => {
    console.log('滑块结束时的值:', values);
    console.log('滑块范围:', {
      min: 0,
      max: 100,
      current: values
    });
  };

  return (
    <div className="pips-slider-container">
      <h2>Pips Interaction Example</h2>
      <div className="pips-slider">
        <NoUiSlider
          start={values}
          connect={true}
          margin={20}
          step={20}
          range={{
            min: 0,
            max: 100
          }}
          pips={{
            mode: 'steps',
            density: 3
          }}
          tooltips={true}
          onChange={handleChange}
          onEnd={handleEnd}
        />
      </div>
      <div className="pips-description">
        <p>当前值: {values.join(' - ')}</p>
        <p>这个示例展示了如何添加刻度标记（pips）并与之交互。</p>
        <p>刻度标记会显示在滑块下方，并且可以通过点击刻度快速定位到该值。</p>
        <p>当前激活的刻度值会以红色加粗显示。</p>
      </div>
    </div>
  );
};

export default PipsSlider; 